import { _decorator, Component, Node, Vec3, Touch } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('JoyStickPannl')
export class JoyStickPannl extends Component {
    // 摇杆面板
    @property(Node)
    panel: Node = null;
    // 摇杆
    @property(Node)
    btn: Node = null;

    // 摇杆在摇杆面板中移动的限制距离
    private panelWidth: number = 50;
    // 触摸ID
    private touchID: number;
    // 用于保存移动方向向量
    public dir: Vec3 = new Vec3(0, 0, 0);
    // 保存弧度(角度)
    public angle: number = 0;
    // 是否正在移动
    public moving: boolean = false;

    onLoad() {

    }

    start() {
        // TODO 判断游戏状态
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
    }

    public stop() {
        this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);

        this.moving = false;
        this.enabled = false;
    }

    private onTouchStart(e: Touch) {
        // 当触摸时设置摇杆面板和摇杆的显示位置
        this.btn.setPosition(new Vec3(0, 0, 0));
        this.touchID = e.getID();
        this.moving = false;
        this.enabled = true;
    }

    private onTouchMove(e: Touch) {
        if (this.touchID != e.getID()) {
            return;
        }
        // 摇杆移动，改变摇杆实时位置
        let posDelta = e.getDelta();
        let x = this.btn.getPosition().x + posDelta.x;
        let y = this.btn.getPosition().y + posDelta.y;
        this.btn.setPosition(new Vec3(x, y, 0));
        // 正在移动
        this.moving = true;
    }

    update() {
        if (this.moving) {
            // 将摇杆限制摇杆面板范围内
            let ratio = this.btn.position.length() / this.panelWidth;
            let xbi = this.btn.position.x / this.btn.position.length();
            let ybi = this.btn.position.y / this.btn.position.length();
            if (ratio > 1) {
                this.btn.setPosition(new Vec3(xbi * this.panelWidth, ybi * this.panelWidth, 0));
            }
            // 保存向量方向
            this.dir = new Vec3(xbi, ybi, 0);
            // 获取弧度
            this.angle = Math.atan2(this.btn.getPosition().y, this.btn.getPosition().x);
        }
    }

    private onTouchEnd(e: Touch) {
        // 还原摇杆面板和摇杆位置
        if (this.touchID != e.getID()) {
            return;
        }
        this.btn.setPosition(new Vec3(0, 0, 0));
        this.moving = false;
        this.enabled = false;
    }

    private onTouchCancel(e: Touch) {
        if (this.touchID != e.getID()) {
            return;
        }
        this.btn.setPosition(0, 0);
        this.moving = false;
        this.enabled = false;
    }

    onDestroy() {
        this.stop();
    }

}